<@>layout("/common/default.html"){
<style>
    body .layim-chat-main {
        height: auto;
    }
</style>
<div class="layim-chat-main">
    <ul id="LAY_view"></ul>
</div>
<div id="LAY_page" style="margin: 0 10px;"></div>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.createUserId == item.landUserId ){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.createTimeStr) }}</i>{{ item.createUserName }}</cite></div><div
            class="layim-chat-text">
      {{#  if(item.msg_type == '0'){ }}
            {{ layui.layim.content(item.content) }}
      {{#  } else if(item.msg_type == '1'){ }}
        <img src="{{ layui.layim.content(item.content) }}"/>
      {{#  } else if(item.msg_type == '2'){ }}
        <video src="{{ layui.layim.content(item.content) }}" controls='controls'></video>
       {{#  } }}
    </div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.createUserName }}<i>{{ layui.data.date(item.createTimeStr) }}</i></cite></div><div
            class="layim-chat-text">
      {{#  if(item.msg_type == '0'){ }}
            {{ layui.layim.content(item.content) }}
      {{#  } else if(item.msg_type == '1'){ }}
        <img src="{{ layui.layim.content(item.content) }}"/>
      {{#  } else if(item.msg_type == '2'){ }}
        <video src="{{ layui.layim.content(item.content) }}" controls='controls'></video>
       {{#  } }}
    </div></li>
  {{# }
}); }}
</textarea>
<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html
-->
<script>
    var url = "${ctxPath}/ajax/layim/historyMessage";
    var pageNode;
    var totalCount;
    layui.use(['layim', 'laypage'], function () {
        var layim = layui.layim
            , layer = layui.layer
            , laytpl = layui.laytpl
            , $ = layui.jquery
            , laypage = layui.laypage
            , param = location.search;

        //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
        //开始请求聊天记录
        console.log("分页参数" + JSON.stringify(param));
        $.cajax(url + param, {}, function (data) {
            var result = data;
            console.log(result);
            pageNode = data.page.page;
            totalCount = data.page.totalCount;
            var html = laytpl(LAY_tpl.value).render({
                data: result.data,
                msg: result.msg
            });
            $('#LAY_view').html(html);
            //分页按钮
            laypage.render({
                elem: 'LAY_page',
                curr: pageNode,
                count: totalCount, //数据总数
                groups: 3,//连续显示分页数
                skip: true,
                jump: function (obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr;
                    var page = {};
                    page.page = curr;
                    console.log("当前页数" + curr);
                    if (!first) {
                        var vl = param + "&page=" + curr;
                        $.cajax(url + vl, {}, function (data) {
                            var result = data;
                            var html = laytpl(LAY_tpl.value).render({
                                data: result.data
                            });
                            $('#LAY_view').html(html);
                        }, true, true);
                    }
                }
            });
        }, true, true);
    });
</script>
<@>}